<template>
  <div class="app-container">
    <!--    <div class="top-box">
          <div class=" iboxH">

          </div>
          <div class=" iboxH"></div>
          <div class=" iboxH"></div>
        </div>-->
    <div class="item-list">
      <div class="item-box" v-loading="loading1">
        <el-card v-for="(item,index) in agentData" :key="index" :class="{ 'click-box': active===index+'Agent' }"
                 style="margin: 10px"
                 @click.native="active=index+'Agent' ,handleAgent(item.platformAgentId)">
          <div slot="header" class="clearfix">
            <span>{{ item.platformAgentName }}</span>

          </div>
          <div class="text item">
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#409EFF'}" title="装机">
                    <template slot="formatter"> {{ item.allDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-s-opportunity" style="color: #409EFF"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#67C23A'}" title="上线">
                    <template slot="formatter"> {{ item.onDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-s-flag" style="color: #67C23A"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#F56C6C'}" title="离线">
                    <template slot="formatter"> {{ item.offDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-message-solid" style="color: #F56C6C"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-table
              :data="item.tableList"
              style="width: 100%;margin-top: 10px">
              <el-table-column
                label=""
                prop="day"
              >
              </el-table-column>
              <el-table-column
                label="订单量"
                prop="orderSum"
              >
              </el-table-column>
              <el-table-column
                label="营业额"
                prop="turnover">
              </el-table-column>
              <el-table-column
                label="售电量"
                prop="powerSale">
              </el-table-column>
              <el-table-column
                label="综合电价"
                prop="powerPrice">
              </el-table-column>
            </el-table>
          </div>
        </el-card>

      </div>
      <div class="item-box" v-loading="loading2">
        <el-card v-for="(item,index) in stationData" :key="index" :class="{ 'click-box': activeStation===index+'station' }"
                 style="margin: 10px"
                 @click.native="activeStation=index+'station',getDeviceStatisticsByStationId(item.stationId)">
          <div slot="header" class="clearfix">
            <span>{{ item.stationName }}</span>

          </div>
          <div class="text item">
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#409EFF'}" title="装机">
                    <template slot="formatter"> {{ item.allDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-s-opportunity" style="color: #409EFF"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#67C23A'}" title="上线">
                    <template slot="formatter"> {{ item.onDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-s-flag" style="color: #67C23A"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#F56C6C'}" title="离线">
                    <template slot="formatter"> {{ item.offDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-message-solid" style="color: #F56C6C"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
            <el-table
              :data="item.tableList"
              style="width: 100%;margin-top: 10px">
              <el-table-column
                label=""
                prop="day"
              >
              </el-table-column>
              <el-table-column
                label="订单量"
                prop="orderSum"
              >
              </el-table-column>
              <el-table-column
                label="营业额"
                prop="turnover">
              </el-table-column>
              <el-table-column
                label="售电量"
                prop="powerSale">
              </el-table-column>
              <el-table-column
                label="综合电价"
                prop="powerPrice">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
      <div class="item-box" v-loading="loading3">
        <el-card v-for="(item,index) in deviceData" :key="index" style="margin: 10px">
          <!--                 :class="{ 'click-box': active===index+'device' }"
                           @click.native="active=index+'device'">-->
          <div slot="header" class="clearfix">
            <span>{{ item.deviceName }}</span>

          </div>
          <div class="text item">
<!--            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#409EFF'}" title="装机">
                    <template slot="formatter"> {{ item.allDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-s-opportunity" style="color: #409EFF"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#67C23A'}" title="上线">
                    <template slot="formatter"> {{ item.onDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-s-flag" style="color: #67C23A"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic :value-style="{'color':'#F56C6C'}" title="离线">
                    <template slot="formatter"> {{ item.offDeviceSum }}</template>
                    <template slot="suffix">
                      <i class="el-icon-message-solid" style="color: #F56C6C"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
            </el-row>-->
            <el-table
              :data="item.tableList"
              style="width: 100%;margin-top: 10px">
              <el-table-column
                label=""
                prop="day"
              >
              </el-table-column>
              <el-table-column
                label="订单量"
                prop="orderSum"
              >
              </el-table-column>
              <el-table-column
                label="营业额"
                prop="turnover">
              </el-table-column>
              <el-table-column
                label="售电量"
                prop="powerSale">
              </el-table-column>
              <el-table-column
                label="综合电价"
                prop="powerPrice">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

import {
  getPlatformAgentStatistics,
  getStationStatisticsByAgentId,
  getDeviceStatisticsByStationId
} from "@/api/business/statistics";

export default {
  name: "Operational",
  data() {
    return {
      active: null,
      activeStation: null,
      // 遮罩层
      loading1: false,
      loading2: false,
      loading3: false,
      agentData: [],
      agentTableData: [],
      stationData: [],
      stationTableData: [],
      deviceData: [],
      deviceTableData: [],
    };
  },
  async created() {
    await this.getPlatformAgentStatistics()
    await this.handleInit()
  },
  methods: {
    async handleAgent(agentId){
      this.stationData = []
      this.deviceData = []
      await this.getStationStatisticsByAgentId(agentId)
      await this.getDeviceStatisticsByStationId(this.stationData[0].stationId)
      this.activeStation='0station'
    },
    async handleInit(){
      await this.getStationStatisticsByAgentId(this.agentData[0].platformAgentId)
      this.active = '0Agent'
      if (this.stationData.length>0) {
        await this.getDeviceStatisticsByStationId(this.stationData[0].stationId)
        this.activeStation='0station'
      }

    },
    async getPlatformAgentStatistics() {
      try {
        this.loading1 = true
        let res = await getPlatformAgentStatistics()
        this.agentData = res.data
        this.agentData.forEach(i => {
          i.tableList = [
            {
              day: '今日',
              orderSum: i.todayOrderSum,
              turnover: i.todayOrderTurnover,
              powerSale: i.todayPowerSale,
              powerPrice: i.todayPowerPrice
            },
            {
              day: '昨日',
              orderSum: i.yesterdayOrderSum,
              turnover: i.yesterdayOrderTurnover,
              powerSale: i.yesterdayPowerSale,
              powerPrice: i.yesterdayPowerPrice
            },
            {
              day: '本月',
              orderSum: i.monthOrderSum,
              turnover: i.monthOrderTurnover,
              powerSale: i.monthPowerSale,
              powerPrice: i.monthPowerPrice
            }
          ]
        })
        this.loading1 = false
      } catch (e) {
        this.loading1 = false
      }
    },
    async getStationStatisticsByAgentId(agentId) {
      try {
        this.loading2 = true
        let res = await getStationStatisticsByAgentId(agentId)
        this.stationData = res.data
        this.stationData.forEach(i => {
          i.tableList = [
            {
              day: '今日',
              orderSum: i.todayOrderSum,
              turnover: i.todayOrderTurnover,
              powerSale: i.todayPowerSale,
              powerPrice: i.todayPowerPrice
            },
            {
              day: '昨日',
              orderSum: i.yesterdayOrderSum,
              turnover: i.yesterdayOrderTurnover,
              powerSale: i.yesterdayPowerSale,
              powerPrice: i.yesterdayPowerPrice
            },
            {
              day: '本月',
              orderSum: i.monthOrderSum,
              turnover: i.monthOrderTurnover,
              powerSale: i.monthPowerSale,
              powerPrice: i.monthPowerPrice
            }
          ]
        })
        this.loading2 = false
      } catch (e) {
        this.loading2 = false
      }
    },

    async getDeviceStatisticsByStationId(stationId) {
      try {
        this.loading3 = true
        let res = await getDeviceStatisticsByStationId(stationId)
        this.deviceData = res.data
        this.deviceData.forEach(i => {
          i.tableList = [
            {
              day: '今日',
              orderSum: i.todayOrderSum,
              turnover: i.todayOrderTurnover,
              powerSale: i.todayPowerSale,
              powerPrice: i.todayPowerPrice
            },
            {
              day: '昨日',
              orderSum: i.yesterdayOrderSum,
              turnover: i.yesterdayOrderTurnover,
              powerSale: i.yesterdayPowerSale,
              powerPrice: i.yesterdayPowerPrice
            },
            {
              day: '本月',
              orderSum: i.monthOrderSum,
              turnover: i.monthOrderTurnover,
              powerSale: i.monthPowerSale,
              powerPrice: i.monthPowerPrice
            }
          ]
        })
        this.loading3 = false
      } catch (e) {
        this.loading3 = false
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.click-box {
  border: 1px solid #67C23A;
}

.top-box {
  display: flex;
  justify-content: space-between;
}

.iboxH {
  height: 100%;
  width: 32.5%;
  background-color: #7a6df0;
}

.top-box {
  height: 40px;
}

.item-list {
  height: calc(100vh - 84px - 40px);
  display: flex;
  justify-content: space-between;
}

.item-box {
  width: 32.5%;
  overflow-y: scroll;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  color: #303133;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
